<template>
  <div>
    <div style="width: 400px;margin: 20px auto">
      <el-input placeholder="请输入内容" v-model="type.input1">
        <el-select style="width: 100px;" class="select" v-model="type.select1" slot="prepend" placeholder="请选择">
          <el-option label="请选择" :value="0"></el-option>
          <el-option v-for="(item1,index) in type.types" :key="index" :label="item1.name" :value="item1.id">
          </el-option>
        </el-select>
        <el-button type="primary" slot="append" icon="el-icon-search" @click="search()">搜索
        </el-button>
      </el-input>
    </div>
    <div class="product">
      <!--<div class="title"><h3>有关 <span style="color: #969896;">{{ type.input }}</span> 的期刊有：</h3></div>-->
      <book-list title="" :book-data="type.books"></book-list>
      <div v-if="type.total>10" style="width: 99%;display: flex">
        <div style="margin: -100px auto 50px;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="type.page"
              :page-size="type.size"
              layout="total, prev, pager, next"
              :total="type.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import bookList from "@/components/bookList.vue";

export default {
  name: "searchBook",
  components: {bookList},
  data() {
    return {
      type: {
        books: "",
        page: 1,
        size: 10,
        typeId: '',
        input: '',
        input1: '',
        total: 0,
        select: 0,
        select1: 0,
        types: '',
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getSearchBooks()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getSearchBooks()
    },
    search(id, input) {
      this.type.select = this.type.select1
      this.type.input = this.type.input1
      this.getSearchBooks();
    },
    getSearchBooks() {
      this.$api.book.getBooksByTypeAndName(
          this.type.page,
          this.type.size,
          this.type.select1,
          this.type.input
      ).then((res) => {
        var data = res.data;
        if (data.success) {
          this.type.books = data.content.records;
          this.type.total = data.content.total;
        } else {
          this.$message.error('服务器查询失败');
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      });
    }
  },
  filters: {
    myFilter(value) {
      return parseFloat(value).toFixed(2);
    }
  },
  mounted() {
    this.getSearchBooks()
    this.$api.bookType.getBookType().then((res) => {
      var data = res.data;
      if (data.success) {
        this.type.types = data.content;
      } else {
        this.$message.error('服务器返回失败');
      }
    }).catch((resp) => {
      this.$message.error('服务器访问失败' + resp);
    })
  }
}
</script>

<style scoped>
.seach {
  border: 1px solid grey;
  float: left;
  height: 100%;
  background-color: #f6f6fa;
  text-align: center;
  margin: 0 30px 0 80px;
}

.seach img {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  width: 18px;
  height: 18px;
}

.seach input {
  width: 150px;
  float: left;
  font-size: 16px;
  margin-top: 11px;
  margin-left: 8px;
  border: none;
  outline: none;
  background-color: transparent;
}
</style>